import { CenterPopup } from 'antd-mobile';
import React, { FC } from 'react';
import { useTranslation } from 'react-i18next';

export const CenterPopupComponent: FC<{
  title?: string | React.ReactNode;
  visible: boolean;
  setVisible: (visible: boolean) => void;
  content?: string | React.ReactNode;
  onClick?: () => void;
}> = ({ title, visible, setVisible, content, onClick }) => {
  const { t } = useTranslation();

  const confirm = () => {
    console.log('confirm');
    onClick && onClick();
    setVisible(false);
  };
  return (
    <div>
      <CenterPopup visible={visible} onMaskClick={() => setVisible(false)}>
        <div className="text-white-1-1 p-4 bg-bg-1">
          <div
            className="popup-title text-center font-bold"
            style={{
              fontSize: '110%',
            }}
          >
            {typeof title == 'string' ? t(title) : title}
          </div>
          <div className="popup-content my-4 text-center text-bg-16 font-semibold">
            {typeof content == 'string' ? t(content) : content}
          </div>
          <div className="popup-btn flex justify-between text-center">
            <div
              onClick={() => setVisible(false)}
              className="flex-1 border py-1 rounded-full"
            >
              {t('cancel')}
            </div>
            <div
              onClick={() => confirm()}
              className="flex-1 border py-1 ml-4 rounded-full border-font-9 text-font-9"
            >
              {t('confirm')}
            </div>
          </div>
        </div>
      </CenterPopup>
    </div>
  );
};
